import React, { Component } from "react";

import FilterFooter from "../../../../components/FilterFooter";

import { Spring } from "react-spring/renderprops";

import classNames from "classnames";

import styles from "./index.module.css";

export default class FilterMore extends Component {
  state = {
    values: this.props.defaultValues
  };

  // 获取选中值
  handleSelect = val => {
    const { values } = this.state;
    let newValues;
    // 判断数组中是否有该项
    if (values.indexOf(val) > -1) {
      // 如果有，就删除
      newValues = values.filter(item => item !== val);
    } else {
      // 没有添加
      newValues = [...values, val];
    }
    this.setState({
      values: newValues
    });
  };

  // 渲染标签
  renderFilters(data) {
    // 高亮类名： styles.tagActive
    return data.map(item => {
      const isSelected = this.state.values.indexOf(item.value) > -1;
      return (
        <span
          key={item.value}
          className={classNames(styles.tag, {
            [styles.tagActive]: isSelected
          })}
          onClick={() => this.handleSelect(item.value)}
        >
          {item.label}
        </span>
      );
    });
  }

  render() {
    // console.log(this.props);

    const {
      onClose,
      onSave,
      data: { roomType, oriented, floor, characteristic },
      type
    } = this.props;

    const isOpen = type === "more";
    // console.log(isOpen);

    return (
      <div className={styles.root}>
        {/* 遮罩层 */}
        <Spring to={{ opacity: isOpen ? 1 : 0 }}>
          {props => {
            // console.log(props);

            if (props.opacity === 0) return null;
            return (
              <div style={props} className={styles.mask} onClick={onClose} />
            );
          }}
        </Spring>

        {/* <div className={styles.mask} onClick={onClose} /> */}

        {/* 条件内容 */}

        <Spring to={{ transform: `translate(${isOpen ? "0px" : "100%"},0px)` }}>
          {props => {
            return (
              <>
                <div style={props} className={styles.tags}>
                  <dl className={styles.dl}>
                    <dt className={styles.dt}>户型</dt>
                    <dd className={styles.dd}>
                      {this.renderFilters(roomType)}
                    </dd>

                    <dt className={styles.dt}>朝向</dt>
                    <dd className={styles.dd}>
                      {this.renderFilters(oriented)}
                    </dd>

                    <dt className={styles.dt}>楼层</dt>
                    <dd className={styles.dd}>{this.renderFilters(floor)}</dd>

                    <dt className={styles.dt}>房屋亮点</dt>
                    <dd className={styles.dd}>
                      {this.renderFilters(characteristic)}
                    </dd>
                  </dl>
                </div>

                {/* 底部按钮 */}
                <FilterFooter
                  style={props}
                  onCancel={() => this.setState({ values: [] })}
                  onOk={() => onSave(this.state.values)}
                  className={styles.footer}
                  cancelText="清除"
                />
              </>
            );
          }}
        </Spring>
      </div>
    );
  }
}
